import { AddressParam } from '@/types/address/userAdd'
import { Popup, Toast } from 'antd-mobile'
import React, { FC, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import region from './region'

type Region = typeof region
interface IselectRegion {
  setRegionVisible: React.Dispatch<React.SetStateAction<boolean>>
  setRegionData: React.Dispatch<
    React.SetStateAction<Partial<Pick<AddressParam, 'provinceId' | 'cityId' | 'countyId'>>>
  >
}
const selectRegion: FC<IselectRegion> = (props) => {
  const navigate = useNavigate()
  const [province_key, setProvince_key] = useState<string>()
  const [city_key, setCity_key] = useState<string>()
  const [county_key, setcounty_key] = useState<string>()
  const [province_name, setProvince_name] = useState<string>()
  const [city_name, setCity_name] = useState<string>()
  const [county_name, setcounty_name] = useState<string>()
  const select_color = 'text-red-e24646'
  return (
    <Popup
      visible={true}
      onMaskClick={() => {
        props.setRegionVisible(false)
      }}
      bodyStyle={{ height: '40vh' }}
    >
      <div>
        <div className="relative h-r3.8 w-full">
          <span
            className=" text-r1.6 cursor-pointer inline-block h-r3.7 leading-r3.7 w-r11.2 text-center "
            onClick={() => {
              props.setRegionVisible(false)
            }}
          >
            取消
          </span>{' '}
          <span
            className="text-r1.6 text-red-e24646  cursor-pointer inline-block  absolute right-0 h-r3.7 leading-r3.7 w-r11.2  text-center "
            onClick={() => {
              if (province_key && city_key && county_key) {
                props.setRegionData({
                  provinceId: parseInt(province_key),
                  cityId: parseInt(city_key),
                  countyId: parseInt(county_key),
                  province_name: province_name,
                  city_name: city_name,
                  county_name: county_name,
                })
                props.setRegionVisible(false)
              } else {
                Toast.show({
                  content: '请选择正确的省市区',
                })
              }
            }}
          >
            确定
          </span>
        </div>
        <div className="flex h-r19.0 ">
          <div className=" flex-1 h-r19.0 overflow-y-auto">
            {Object.keys(region).map((key, k) => {
              return (
                <span
                  key={k}
                  className={
                    ' inline-block w-full text-center text-r1.5 pb-r0.7 pt-r0.7 ' +
                    (province_key === key ? select_color : '')
                  }
                  onClick={(e) => {
                    setProvince_key(key)
                    setProvince_name(region[key].name)
                  }}
                >
                  {region[key].name}
                </span>
              )
            })}
          </div>
          <div className=" flex-1 h-r19.0  overflow-y-auto">
            {province_key && region[province_key] && region[province_key].city
              ? Object.keys(region[province_key].city).map((key, k) => {
                  return (
                    <span
                      key={k}
                      className={
                        ' inline-block w-full text-center text-r1.5 pb-r0.7 pt-r0.7 ' +
                        (city_key === key ? select_color : '')
                      }
                      onClick={(e) => {
                        setCity_key(key)
                        setCity_name(region[province_key].city[key].name)
                      }}
                    >
                      {region[province_key].city[key].name}
                    </span>
                  )
                })
              : null}
          </div>
          <div className=" flex-1 h-r19.0  overflow-y-auto">
            {city_key &&
            province_key &&
            region[province_key].city[city_key] &&
            region[province_key].city[city_key].country
              ? Object.keys(region[province_key].city[city_key].country).map((key, k) => {
                  return (
                    <span
                      key={k}
                      className={
                        ' inline-block w-full text-center text-r1.5 pb-r0.7 pt-r0.7 ' +
                        (county_key === key ? select_color : '')
                      }
                      onClick={(e) => {
                        setcounty_key(key)
                        setcounty_name(region[province_key].city[city_key].country[key].name)
                      }}
                    >
                      {region[province_key].city[city_key].country[key].name}
                    </span>
                  )
                })
              : null}
          </div>
        </div>
      </div>
    </Popup>
  )
}

export default selectRegion
